<v-dialog v-model="dialog" width="90%" max-width="900px">
  <v-card>
    <v-card-title class="title">Potential Issues</v-card-title>
    <v-card-text>
      <p>
        We've detected some system configurations that may affect the
        performance of the application:
      </p>
      <ul :class="$style.list">
        <li v-if="issues.webglVersion">
          Detected WebGL version {{ issues.webglVersion }}.
          (Slower Volume/Glyph rendering)
        </li>
        <li v-if="issues.integratedGPU">
          Detected GPU "{{ issues.integratedGPU }}".
          Dedicated GPU would offer better performance.
        </li>
        <li v-if="issues.angle">
          ANGLE is used for WebGL rendering, which may slow down rendering.
          More info
          <a href="https://chromium.googlesource.com/angle/angle/+/master/README.md">here</a>.
        </li>
      </ul>
    </v-card-text>
    <v-card-actions>
      <v-checkbox
        v-model="suppressWarning"
        label="Don't show again"
        hide-details
      />
      <v-spacer />
      <v-btn
        color="primary"
        v-on:click="closeDialog"
      >
        Okay
      </v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
